<template>
	<view class="">
		<view class="foster-list1">
			<view class="foster-list-msg" v-for="(item,index) in hotList" @click="goPage(item)">
				<view class="foster-list-msg-img">
					<image :src="item.image" mode=""></image>
					<!-- <image src="../../static/logo.png" mode=""></image>   -->
				</view>
				<view class="progress-box dis" style="padding: 6px 6px;">
					<progress style="width: 70%;" border-radius="50" :percent="item.process" stroke-width="10" />
					<text style="font-size: 26rpx;color: #46B681;padding-left: 20px;">已报名{{item.process}}%</text>
				</view>
				<view class="foster-list-msg-list">
					<view class="foster-list-msg-list-msg1">{{item.storeName}}</view>
					<view class="foster-list-msg-list-msg2">
						<image src="@/static/pagesA/icon_hdsj.png" mode="scaleToFill"></image>
						{{item.startTime}}
					</view>
					<view class="foster-list-msg-list-msg2" @click.stop="openLocation(item)">
						<image src="@/static/pagesA/icon_dw.png" mode="scaleToFill"></image>
						{{item.address}}
					</view>

					<!-- <view class="foster-list-msg-list-msg2">已认养 342</view>
					<view class="foster-list-msg-list-msg3">企业认养</view> -->
					<view class="foster-list-msg-list-msg4 dis">
						<view class="foster-list-msg-list-msg4-left">
							<text style="font-size: 20rpx;">¥</text>
							{{item.price}}
						</view>
						<view class="foster-list-msg-list-msg4-right">
							立即报名
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: ["hotList"],
		data() {
			return {}
		},
		methods: {
			openLocation(item) {
				console.log("kkkk", item)
				uni.openLocation({
					latitude: Number(item.latitude),
					longitude: Number(item.longitude),
					name: '目标位置',
					address: item.address,
					success: function() {
						console.log('打开地图导航成功');
					},
					fail: function(err) {
						console.log('打开地图导航失败', err);
					}
				});


			},
			goPage(item) {
				uni.navigateTo({
					url: item.url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.foster-list1 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.foster-list-msg {
			.foster-list-msg-list {
				padding: 0 10rpx;

				.foster-list-msg-list-msg1 {
					font-size: 26rpx;
					color: #333;
					margin-top: 20rpx;
				}

				.foster-list-msg-list-msg2 {
					font-size: 24rpx;
					color: #999;
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}
				}

				.foster-list-msg-list-msg4 {
					margin: 20rpx;
					justify-content: space-between;

					.foster-list-msg-list-msg4-left {
						font-size: 34rpx;
						color: $maincolor;
					}

					.foster-list-msg-list-msg4-right {

						font-size: 26rpx;
						background: $maincolor;
						padding: 6rpx 20px;
						line-height: 44rpx;
						color: #fff;
						border-radius: 37px;
					}
				}

				.foster-list-msg-list-msg3 {
					width: 120rpx;
					text-align: center;
					font-size: 20rpx;
					border-radius: 8rpx;
					opacity: 1;
					margin-top: 20rpx;
					padding: 2rpx 9rpx;
					border: 1px solid $maincolor;
				}
			}

			width: 100%;
			margin: 20rpx 0;

			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px rgba(202, 202, 202, 0.302);
			border-radius: 10rpx;
			opacity: 1;

			.foster-list-msg-img {
				border-radius: 50rpx;
				height: 350rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>